<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3"
      xmlns:layout="http://www.ultrag.net.nz/thymeleaf/layout"
      xmlns:c="http://java.sun.com/jsp/jstl/core">
     
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>直播列表</title>
    <link th:href="@{css/bootstrap.min.css}" rel="stylesheet" />
    <link th:href="@{font-awesome/css/font-awesome.css}" rel="stylesheet" />
    <link th:href="@{css/animate.css}" rel="stylesheet" />
    <link th:href="@{css/style.css}" rel="stylesheet" />
</head>

<body>
    <div id="wrapper">
    <nav class="navbar-default navbar-static-side" role="navigation">
        <div class="sidebar-collapse">
            <ul class="nav metismenu" id="side-menu">
                <li class="nav-header">
                    <div class="dropdown profile-element"> <span>
                            <img alt="image" class="img-circle" th:src="@{img/goddess.jpg}" />
                             </span>
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                            <span class="clear"> <span class="block m-t-xs"> <strong th:text="${user.name}" class="font-bold">David Williams</strong>
                             </span> <span class="text-muted text-xs block">程序员励志师 <b class="caret"></b></span> </span> </a>
                        <ul class="dropdown-menu animated fadeInRight m-t-xs">          
                            <li><a href="./logout">退出</a></li>
                        </ul>
                    </div>
                    <div class="logo-element">
                        AU+
                    </div>
                </li>
                <li>
                    <a href="./liveList"><i class="fa fa-diamond"></i> <span class="nav-label">直播列表</span> <span class="fa arrow"></span></a>           
                </li>
                
          </ul>           
        </div>
    </nav>

        <div id="page-wrapper" class="gray-bg">
        <div class="row border-bottom">
        <nav class="navbar navbar-static-top" role="navigation" style="margin-bottom: 0">
        <div class="navbar-header">
            <a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#"><i class="fa fa-bars"></i> </a>
            <form role="search" class="navbar-form-custom" action="">
                <div class="form-group">
                    <input type="text" placeholder="你要找什么，请戳我..." class="form-control" name="top-search" id="top-search" />
                </div>
            </form>
        </div>
            <ul class="nav navbar-top-links navbar-right">
                <li>
                    <span class="m-r-sm text-muted welcome-message">欢迎来到AU+.</span>
                </li>            
                <li>
                    <a href="./logout">
                        <i class="fa fa-sign-out"></i> Log out
                    </a>
                </li>
            </ul>

        </nav>
        </div>
            <div class="row wrapper border-bottom white-bg page-heading">
                <div class="col-lg-2">
                    <h2><a href="./publisher"><button type="submit" class="btn btn-primary block full-width m-b">我要发直播</button></a></h2>                    
                </div>
            </div>
        <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div th:each="liveRedis:${liveList}" class="col-lg-4">
                <div class="contact-box">
                <!-- <a th:href="@{/live/{keyName}(keyName=${liveRedis.keyname})}"></a> -->
                    <a th:href="@{/live(keyname=${liveRedis.keyname})}">
                    <div class="col-sm-4">
                        <div class="text-center">
                            <img alt="image" class="img-circle m-t-xs img-responsive" th:src="@{/img/goddess.jpg}" />
                            <div th:text="${liveRedis.userName}" class="m-t-xs font-bold">Goddess</div>
                        </div>
                    </div>
                    <div class="col-sm-8">
                        <h3><strong th:text="${liveRedis.liveName}">John Smith</strong></h3>
                       
                        <p><i class="fa fa-map-marker"></i> Riviera State 32/106</p>
                        <address>
                            <strong th:text="${liveRedis.content}">Twitter, Inc.</strong><br />
                          
                        </address>
                        <p><strong th:text="${liveRedis.keyname}">默认直播间地址...</strong></p>
                    </div>
                    <div class="clearfix"></div>
                        </a>
                </div>
            </div> 
            
               
        </div>
        </div>
        
        <div class="footer">
            <div class="pull-right">
                10GB of <strong>250GB</strong> Free.
            </div>
            <div>
                <strong>Copyright</strong> Example Company &copy; 2017-2055
            </div>
        </div>

        </div>
        </div>

    <!-- Mainly scripts -->
    <script th:src="@{/js/jquery-2.1.1.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/js/plugins/metisMenu/jquery.metisMenu.js}"></script>
    <script th:src="@{/js/plugins/slimscroll/jquery.slimscroll.min.js}"></script>

    <!-- Custom and plugin javascript -->
    <script th:src="@{/js/inspinia.js}"></script>
    <script th:src="@{/js/plugins/pace/pace.min.js}"></script>
    
    <script th:inline="javascript">
    $(document).ready(function(){
    	$('.contact-box').each(function(){
    		animationHover(this,'pulse');
    	});
    	
    	 var message = [[${message}]];     
    	    if(message != null){
    	    	alert(message);
    	    }
    });    
    </script>


</body>

</html>
